import { observer } from "Mobx-react";
import { Input, InputNumber, message } from "antd";
import type { optionType } from "@/types/index";

interface SliderOptionProps {
  option: optionType[];
}

function SliderOption({
  option = [
    { content: "", id: 0 },
    { content: "", id: 100 }
  ]
}: SliderOptionProps) {
  const handleChange = (value: number, ix: number) => {
    if ((ix === 0 && Number(value) >= option[1].id) || (ix === 1 && Number(value) <= option[0].id)) return message.error(`最大值不能小于最小值！`);
    option[ix].id = Number(value);
  };
  const textChange = (e: React.ChangeEvent<HTMLInputElement>, ix: number) => {
    const { value } = e.target;
    option[ix].content = value;
  };
  return (
    <div className="slider-option">
      {option.map((record, ix) => (
        <div key={ix}>
          <span>{ix === 0 ? "最小值：" : "最大值："}</span>
          <InputNumber style={{ width: "80px" }} min={0} value={record.id} onChange={value => handleChange(value || 0, ix)} />
          <span style={{ marginLeft: 30 }}>{ix === 0 ? "最小值显示文本：" : "最大值显示文本："}</span>
          <Input value={record.content} onChange={e => textChange(e, ix)} style={{ width: "100px" }} />
        </div>
      ))}
    </div>
  );
}

export default observer(SliderOption);
